<template>
  <div class="container">
    <h2>我的待办清单</h2>
    <input type="text" v-model="newTask" @keyup.enter="addTask" placeholder="添加新任务">
    <div class="tasks">
      <h3>未完成任务</h3>
      <ul>
        <li v-for="(task, index) in incompleteTasks" :key="index">
          <span>{{ task.name }}</span>
          <div>
            <button @click="toggleTaskStatus(task)">标记完成</button>
            <button @click="deleteTask(task)">删除</button>
          </div>
        </li>
      </ul>
      <h3>已完成任务</h3>
      <ul>
        <li v-for="(task, index) in completedTasks" :key="index">
          <span class="completed">{{ task.name }}</span>
          <div>
            <button @click="toggleTaskStatus(task)">取消完成</button>
            <button @click="deleteTask(task)">删除</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const newTask = ref('');
    const tasks = ref([]);

    const addTask = () => {
      if (newTask.value.trim() !== '') {
        tasks.value.push({ name: newTask.value, completed: false });
        newTask.value = '';
      }
    };

    const toggleTaskStatus = (task) => {
      task.completed = !task.completed;
    };

    const deleteTask = (task) => {
      const index = tasks.value.indexOf(task);
      tasks.value.splice(index, 1);
    };

    const incompleteTasks = computed(() => tasks.value.filter(task => !task.completed));
    const completedTasks = computed(() => tasks.value.filter(task => task.completed));

    return {
      newTask,
      tasks,
      addTask,
      toggleTaskStatus,
      deleteTask,
      incompleteTasks,
      completedTasks
    };
  }
};
</script>

<style>
.container {
  margin: 20px auto;
  width: 80%;
  max-width: 600px;
}

.tasks {
  margin-top: 20px;
}

h2, h3 {
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.completed {
  text-decoration: line-through;
}

button {
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
</style>